<template>
  <div id="rightSecond" class="greenjz-item-bg">
    <!-- 园林建设 -->
    <div>
      <div class="title_wrap grid-item">
        <div class="title">
          <span>园林建设</span>
        </div>
        <yearOrYearSwitch :year="socialHouseIntervalCount" />
      </div>
      <div class="form_zps_wrap">
        <div class="from_zps_identification">
          <span class="form_zps_left">年度计划值</span>
          <span>当前月度进度值</span>
        </div>
        <ul class="from_zps_ul">
          <li class="from_zps_li" v-for="item in ylsz_yljs.data" :key="item.title">
            <span class="from_zps_1">{{item.title}}</span>
            <div class="from_zps_2">
              <div class="from_zps_2_1" :style="'width:'+item.liftingNumber"></div>
            </div>
            <countTo
              class="from_zps_3"
              :startVal="0"
              :endVal="item.ydjdz"
              separator
              :duration="2000"
            ></countTo>
            <countTo
              class="from_zps_4"
              :startVal="0"
              :endVal="item.ndjhz"
              separator
              :duration="2000"
            ></countTo>
            <span class="from_zps_5">{{item.dw}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 老旧改造小区 -->
    <div class="grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>老旧改造小区</span>
      </div>
      <yearOnYearTable :tableData="ylsz_ljgzxq.tableData" />
    </div>
  </div>
</template>
<script>
import yearOnYearTable from "../../components/homePage/yearOnYearTable";
import yearOrYearSwitch from "../../components/homePage/YearOrYearSwitch";
export default {
  name: "rightSecond",
  components: {
    yearOnYearTable,
    yearOrYearSwitch
  },
  data() {
    return {
      // 园林建设计时器执行次数
      socialHouseIntervalCount: 0,
      //园林建设数据
      ylsz_yljs: {
        data: [
          {
            title: "新增绿道",
            ydjdz: 1000,
            ndjhz: 2000,
            dw: "km",
            liftingNumber: "70%"
          },
          {
            title: "新增绿地",
            ydjdz: 900,
            ndjhz: 1800,
            dw: "m²",
            liftingNumber: "60%"
          },
          {
            title: "公园绿地",
            ydjdz: 1600,
            ndjhz: 3200,
            dw: "m²",
            liftingNumber: "80%"
          },
          {
            title: "郊野公园",
            ydjdz: 700,
            ndjhz: 1400,
            dw: "m²",
            liftingNumber: "40%"
          },
          {
            title: "立体绿化",
            ydjdz: 800,
            ndjhz: 1600,
            dw: "m²",
            liftingNumber: "65%"
          }
        ],
        year2019: [
          {
            title: "新增绿道",
            ydjdz: 1000,
            ndjhz: 2000,
            dw: "km",
            liftingNumber: "70%"
          },
          {
            title: "新增绿地",
            ydjdz: 900,
            ndjhz: 1800,
            dw: "m²",
            liftingNumber: "60%"
          },
          {
            title: "公园绿地",
            ydjdz: 1600,
            ndjhz: 3200,
            dw: "m²",
            liftingNumber: "80%"
          },
          {
            title: "郊野公园",
            ydjdz: 700,
            ndjhz: 1400,
            dw: "m²",
            liftingNumber: "40%"
          },
          {
            title: "立体绿化",
            ydjdz: 800,
            ndjhz: 1600,
            dw: "m²",
            liftingNumber: "65%"
          }
        ],
        year2018: [
          {
            title: "新增绿道",
            ydjdz: 700,
            ndjhz: 1400,
            dw: "km",
            liftingNumber: "50%"
          },
          {
            title: "新增绿地",
            ydjdz: 1200,
            ndjhz: 2400,
            dw: "m²",
            liftingNumber: "70%"
          },
          {
            title: "公园绿地",
            ydjdz: 1100,
            ndjhz: 2200,
            dw: "m²",
            liftingNumber: "65%"
          },
          {
            title: "郊野公园",
            ydjdz: 950,
            ndjhz: 1900,
            dw: "m²",
            liftingNumber: "85%"
          },
          {
            title: "立体绿化",
            ydjdz: 1000,
            ndjhz: 2000,
            dw: "m²",
            liftingNumber: "50%"
          }
        ],
        year2017: [
          {
            title: "新增绿道",
            ydjdz: 600,
            ndjhz: 1200,
            dw: "km",
            liftingNumber: "60%"
          },
          {
            title: "新增绿地",
            ydjdz: 800,
            ndjhz: 1600,
            dw: "m²",
            liftingNumber: "50%"
          },
          {
            title: "公园绿地",
            ydjdz: 900,
            ndjhz: 1800,
            dw: "m²",
            liftingNumber: "75%"
          },
          {
            title: "郊野公园",
            ydjdz: 1000,
            ndjhz: 2000,
            dw: "m²",
            liftingNumber: "45%"
          },
          {
            title: "立体绿化",
            ydjdz: 1300,
            ndjhz: 2600,
            dw: "m²",
            liftingNumber: "60%"
          }
        ],
        year2016: [
          {
            title: "新增绿道",
            ydjdz: 800,
            ndjhz: 1600,
            dw: "km",
            liftingNumber: "60%"
          },
          {
            title: "新增绿地",
            ydjdz: 1000,
            ndjhz: 2000,
            dw: "m²",
            liftingNumber: "50%"
          },
          {
            title: "公园绿地",
            ydjdz: 1300,
            ndjhz: 3200,
            dw: "m²",
            liftingNumber: "75%"
          },
          {
            title: "郊野公园",
            ydjdz: 900,
            ndjhz: 1800,
            dw: "m²",
            liftingNumber: "45%"
          },
          {
            title: "立体绿化",
            ydjdz: 1100,
            ndjhz: 2200,
            dw: "m²",
            liftingNumber: "60%"
          }
        ]
      },
      ylsz_ljgzxq: {
        tableData: [
          {
            plan: "计划改造小区数（户）",
            planNumber: 23900,
            lifting: true,
            liftingNumber: 10.29
          },
          {
            plan: "实际完成改造小区数（户）",
            planNumber: 20150,
            lifting: true,
            liftingNumber: 10.29
          },
          {
            plan: "总建筑面积（万平方米）",
            planNumber: 160000,
            lifting: false,
            liftingNumber: 10.29
          },
          {
            plan: "预计投资总金额（万元）",
            planNumber: 980000,
            lifting: false,
            liftingNumber: 10.29
          }
        ]
      },
      url: "http://10.10.208.6:2020/home/serv"
    };
  },
  mounted() {
    this.getylsz_yljs();
  },
  methods: {
    getylsz_yljs() {
      let params = { path: "st", groupid: 11, year: 1, ismonth: 0 };
      this.http.post(this.url, params).then(res => {
        console.log("园林建设", res);
        // 开启定时，进行轮播
        let _this = this;
        setInterval(() => {
          let count = _this.socialHouseIntervalCount;
          count++;
          let mod = count % 4;
          switch (mod) {
            case 0: {
              _this.ylsz_yljs.data = _this.ylsz_yljs.year2019;
              break;
            }
            case 1: {
              _this.ylsz_yljs.data = _this.ylsz_yljs.year2018;
              break;
            }
            case 2: {
              _this.ylsz_yljs.data = _this.ylsz_yljs.year2017;
              break;
            }
            case 3: {
              _this.ylsz_yljs.data = _this.ylsz_yljs.year2016;
              break;
            }
          }
          _this.socialHouseIntervalCount = count;
        }, 5 * 1000);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/building/rightSecond.scss";
</style>